<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关联题目</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--  引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">



</head>
<body>



<div id="alice">

    关联题目

    <el-divider></el-divider>
    <div class="span">
        题目ID：
        <div class="div_inner">
            <el-input v-model="input" placeholder="请输入题目ID"></el-input>
        </div>
    </div>

    <div class="span">
        知识点：
        <div class="div_inner">
            <el-dropdown>
                <!--<span class="el-dropdown-link">
                  请选择内容<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                </span>-->
                <el-input v-model="input" placeholder="请输入编号"></el-input>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>知识点001</el-dropdown-item>
                    <el-dropdown-item>知识点002</el-dropdown-item>
                    <el-dropdown-item>知识点003</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>

    <div class="kg"></div>

    <div class="span">
        <el-button type="primary" size="small">查询</el-button>
    </div>


    <div id="crazy_hat">

        <div class="div_out">
            <div class="tiku">题库</div>
            <div class="insert_delete">
            <div class="span">
                <el-button type="primary" size="small">添加</el-button>
            </div>

            <div class="span">
                <el-button type="primary"  size="small">删除</el-button>
            </div>
            </div>

            <div>
                <el-table
                        :data="tableData"
                        style="width: 90%;margin-left: 5%"
                        :row-class-name="tableRowClassName">
                    <el-table-column
                            prop="ques_id"
                            label="题目ID"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="type"
                            label="题型"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="content"
                            label="题干内容"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="content"
                            label="图片"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="content"
                            label="视频解析"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="content"
                            label="文字解析"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="diffcult"
                            label="难度"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="point"
                            label="知识点"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="score"
                            label="分值"
                            width="100">
                    </el-table-column>

                    <el-table-column
                            prop="editor_time"
                            label="编辑时间"
                            width="150">
                    </el-table-column>

                </el-table>

            </div>


        </div>







    </div>



</div>



<script>


    let data = {
        radio:"",
        input:"",
        send_time:"",
        mes_type:"",
        tableData: [{
            ques_id:'WN0012',
            type:'单选题',
            content:'解析解析内容内容',
            diffcult:'难',
            point:'0012',
            score:'2',
            editor_time:'2016-02-3',
            done_num:'1330',
            rate:'65%',
            error_option:'D',

            /*date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',*/
        }, {
            ques_id:'WN0012',
            type:'单选题',
            content:'解析解析内容内容',
            diffcult:'难',
            point:'0012',
            score:'2',
            editor_time:'2016-02-3',
            done_num:'1330',
            rate:'65%',
            error_option:'D'

        }, {
            ques_id:'WN0012',
            type:'单选题',
            content:'解析解析内容内容',
            diffcult:'难',
            point:'0012',
            score:'2',
            editor_time:'2016-02-3',
            done_num:'1330',
            rate:'65%',
            error_option:'D',

        }, {
            ques_id:'WN0012',
            type:'单选题',
            content:'解析解析内容内容',
            diffcult:'难',
            point:'0012',
            score:'2',
            editor_time:'2016-02-3',
            done_num:'1330',
            rate:'65%',
            error_option:'D'

        },
            {
                ques_id:'WN0012',
                type:'单选题',
                content:'解析解析内容内容',
                diffcult:'难',
                point:'0012',
                score:'2',
                editor_time:'2016-02-3',
                done_num:'1330',
                rate:'65%',
                error_option:'D',

            }, {
                ques_id:'WN0012',
                type:'单选题',
                content:'解析解析内容内容',
                diffcult:'难',
                point:'0012',
                score:'2',
                editor_time:'2016-02-3',
                done_num:'1330',
                rate:'65%',
                error_option:'D'

            }, {
                ques_id:'WN0012',
                type:'单选题',
                content:'解析解析内容内容',
                diffcult:'难',
                point:'0012',
                score:'2',
                editor_time:'2016-02-3',
                done_num:'1330',
                rate:'65%',
                error_option:'D',

            }, {
                ques_id:'WN0012',
                type:'单选题',
                content:'解析解析内容内容',
                diffcult:'难',
                point:'0012',
                score:'2',
                editor_time:'2016-02-3',
                done_num:'1330',
                rate:'65%',
                error_option:'D'

            },
            {
                ques_id:'WN0012',
                type:'单选题',
                content:'解析解析内容内容',
                diffcult:'难',
                point:'0012',
                score:'2',
                editor_time:'2016-02-3',
                done_num:'1330',
                rate:'65%',
                error_option:'D',

            }, {
                ques_id:'WN0012',
                type:'单选题',
                content:'解析解析内容内容',
                diffcult:'难',
                point:'0012',
                score:'2',
                editor_time:'2016-02-3',
                done_num:'1330',
                rate:'65%',
                error_option:'D'

            }]

    };

    let main_div = new Vue({

        el:"#alice",
        data:data,
        methods:{
            show1: function(){
                console.log(data.radio+"部分学员");
            },
            show2: function(){
                console.log(data.radio+"全部学员");
            }




        }



    });



</script>










<style type="text/css">

    #alice{
        width:1500px;
        margin: 0 auto;
        margin-top: 55px;

    }

    #crazy_hat{
        height:50px;
        background-color:#eeeeee;
        text-align:center;
        line-height:50px;
        margin-top: 10px;
    }

    .star{
        color:red;
    }


    .div_out {
        margin-top: 15px;
    }


    .div_inner{
        position: relative;
        font-size: 14px;
        display: inline-block;

    }

    .content{
        width:500px;
        height:300px;
        border: 1px solid;

    }


    .span{
        display: inline-block;
        margin-left: 30px;
    }

    .kg{
        display: inline-block;
        margin-left: 500px;
    }
    .tiku{
        display: inline-block;
        margin-left: 50px;
    }
    .insert_delete{
        display: inline-block;
        margin-left: 799px;
    }

</style>





</body>
</html>